import React, { PureComponent } from 'react';
import cx from 'classnames';
import { initHtml } from '@shared/document';
import { shareIconMap, getBtnList } from './util';
import S from './index.m.less';
// share 分享的内容 必须。 btnList 分享列表 非必须, preViewImg 查看二维码的方法, animation 是否有弹出动画, hasQr 是否显示二维码
// preViewImg == false 时则默认调用 modules/preViewImg 中的方法
// 显示二维码必须填写 link, imgUrl, desc
// {
//    title: "所有分享都需要",
//    link: "分享页面的地址必填",
//    imgUrl: "微信的分享图",
//    pics: "微博分享附带的图片数组，QQ和贴吧用第一张 ",
//    desc: "百度贴吧和QQ好友的分享内容",
//    summary: "QQ好友和豆瓣的摘要"
// }
// 分享方式图标 Url 和方法实现在 util.js 文件中
export default function (share, btnList = [], previewImg, animation = true, hasQr = true) {
    if (share && !share.forbidHtml) {
        initHtml({ share }); // 授权处理
    }
    btnList = getBtnList(share, btnList, hasQr);
    WPT.Modal.open(<ShareModal share={share} btnList={btnList} previewImg={previewImg} />, {
        animation,
        animationType: 'dd',
        position: 'bottom',
        isStopBodyScroll: true,
    });
}

export class ShareModal extends PureComponent {
    static defaultProps = {
        title: '分享至',
        share: {},
        btnList: [],
        previewImg: '',
    };

    renderShareMethods = () => {
        const { btnList, share, previewImg } = this.props;
        return btnList.map((item, index) => (
            <div className={cx(S.itemContainer, btnList.length > 4 ? '' : S.defaultMargin)} key={item.name}>
                <div
                    className={S.shareItem}
                    onClick={(e) => shareIconMap.get(item.name).event(e, share, item.name, previewImg)}
                >
                    <div
                        className={S.shareIcon}
                        style={{ backgroundImage: `url(${shareIconMap.get(item.name).url})` }}
                    />
                    <div className={S.shareName}>{item.name}</div>
                </div>
                {btnList.length > 4 && index === btnList.length - 1 && <div className={S.lucidPadding} />}
            </div>
        ));
    };

    render() {
        const { title, btnList } = this.props;
        return (
            <div className={S.shareContainer}>
                <div className={S.title}>{title}</div>
                <div className={S.shareMethodsContainer}>
                    <div
                        className={cx(
                            S.shareMethods,
                            btnList.length > 4 ? '' : S.defaultLayout,
                            WPT.os.pc ? S.pcCompat : ''
                        )}
                    >
                        {this.renderShareMethods()}
                    </div>
                </div>
                <div className={cx(S.cancelBtn, 'modal-close')}>取消</div>
            </div>
        );
    }
}
